<template>
  <div class="container">
    <el-card shadow="never" class="welcome" style="margin-bottom: 16px;">
      <h2>欢迎来到 Bologe</h2>
      <p>一个用 Vue 3 + Element Plus 搭建的个人博客示例。</p>
      <el-button type="primary" @click="$router.push('/posts')">开始浏览文章</el-button>
    </el-card>

    <el-card shadow="never" style="margin-bottom: 16px;">
      <template #header>
        <strong>最新文章</strong>
      </template>
      <el-skeleton v-if="loading" :rows="5" animated />
      <template v-else>
        <el-empty v-if="list.length===0" description="暂无文章" />
        <el-card v-for="p in list" :key="p.id" shadow="hover" style="margin-bottom: 12px;" @click="$router.push(`/article/${p.id}`)">
          <h3 style="margin: 0 0 8px;">{{ p.title }}</h3>
          <div class="muted">{{ p.date }} · {{ p.tags.join(', ') }}</div>
          <p>{{ p.summary }}</p>
        </el-card>
      </template>
    </el-card>

    <el-card shadow="never">
      <h3>关于本站</h3>
      <p>这是一个前端模拟数据的博客项目，用于练习页面布局、路由和响应式。</p>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { fetchPosts } from '@/services/blogService'

const list = ref([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  const { list: l } = await fetchPosts({ page: 1, pageSize: 5 })
  list.value = l
  loading.value = false
})
</script>

<style scoped>
.welcome h2 { margin: 0 0 8px; }
.muted { color: var(--color-muted); }
</style>


